<template>
  <page-layout>
    <a-card :bordered="false">
      <!-- 条件搜索 -->
      <div>
        <a-form>
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="菜单标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="queryParam.title" placeholder="请输入" allow-clear/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item>
                <a-button type="primary" @click="searchQuery"><a-icon type="search" />查询</a-button>
                <a-button style="margin-left: 8px" @click="searchReset"><a-icon type="redo" />重置</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 数据展示 -->
      <vxe-grid
        id="MenuList"
        ref="vxeTable"
        :height="null"
        v-bind="options"
        :pagerConfig="false"
        :treeConfig="{rowField: 'name',children: 'children',reserve:true}"
        :expand-config="{accordion: false}"
      >
      <!-- <template v-slot:toolbar_buttons> -->
        <!-- <div class="table-operator">
          <a-button @click="handleAdd" icon="plus" class="theme--perfect-button">添加</a-button>
        </div> -->
      <!-- </template> -->
      <template #dictText={row,column}>
        <span>{{getDictText(row[column.field])}}</span>
      </template>
      <template #action="{ row }">
        <a @click="handleEdit(row)" >编辑</a>
        <a-divider type="vertical" />
        <a-dropdown>
          <a class="ant-dropdown-link">
            更多 <a-icon type="down"/>
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a @click="handleAddItem(row)">添加子菜单</a>
            </a-menu-item>
            <a-menu-item>
              <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row.id)">
                <a>删除</a>
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </template>
    </vxe-grid>
    <!-- 增加修改 -->
    <MenuModal
      ref="modalForm"
      :menuOptions="dataSource"
      :statusOptions="statusOptions"
      :visibleOptions="visibleOptions"
      @ok="modalFormOk"
    />
    </a-card>
  </page-layout>
</template>

<script>
import MenuModal from './modules/MenuModal'
import { VxeTableMixin } from '@/mixins/VxeTableMixin'
import PageLayout from '@/layouts/PageLayout'
import { deleteAction } from '@/services/manage'
export default {
  name: 'MenuList',
  components: {
    MenuModal,
    PageLayout
  },
  mixins: [VxeTableMixin],
  data() {
    return {
      allIcon: {},
      iconVisible: false,
      list: [],
      // 部门树选项
      menuOptions: [],
      loading: false,
      // 状态数据字典
      statusOptions: [],
      visibleOptions: [],
      queryParam: {
        menuName: undefined,
        visible: undefined
      },
      columns: [
        { type: 'seq', width: 60, field: 'seq' },
        {
          title: '菜单标题',
          field: 'title',
          showOverflow: true,
          width: '15%',
          treeNode: true
        },
        {
          title: '组件路径',
          field: 'component',
          showOverflow: true,
          align: 'center'
        },
        {
          title: '路由路径',
          field: 'path',
          align: 'center'
        },
        {
          title: '图标',
          field: 'icon',
          scopedSlots: { customRender: 'icon' },
          align: 'center'
        },
        {
          title: '排序',
          field: 'order',
          align: 'center'
        },
        {
          title: '创建时间',
          field: 'createTime',
          showOverflow: true,
          align: 'center'
        },
        {
          title: '操作',
          field: 'operation',
          width: 150,
          slots: { default: 'action' },
          align: 'center'
        }
      ],
      url: {
        list: '/res/url/list',
        delete: '/res/url/remove',
        deleteBatch: '/res/url/deleteBatch'
      }
    }
  },
  methods: {
    handleAddItem(row) {
      this.$refs.modalForm.title = '添加子菜单'
      this.$refs.modalForm.add(row)
    },
    handleDelete: function(id) {
      if (!this.url.delete) {
        this.$message.error('请设置url.delete属性!')
        return
      }
      var that = this
      deleteAction(`${that.url.delete}`, { id: id }).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.loadData()
        } else {
          that.$message.warning(res.message)
        }
      })
    }
  }
}

</script>
